<template>
  <div class="post_image" v-show="this.$store.state.imgChoose2">
    <div class="mask"></div>
    <div class="nomask">
      <h1>选择封面图片</h1>
      <div class="bothom">
        <div class="left">
          <div
            class="canvas"
            @mousedown="touchstartFunc"
            @mousemove="touchmoveFunc"
            @mouseup="endFunc"
          >
            <canvas :width="cw" :height="ch" ref="canvas"></canvas>
            <div
              class="mask"
              v-show="isMask"
              :style="{
                width: mw + 'px',
                height: mh + 'px',
                left: ml + 'px',
                top: mt + 'px',
              }"
            ></div>
          </div>
          <input
            type="file"
            class="file"
            accept="image/*"
            ref="file"
            @change="change_file"
          />
          <div class="btns">
            <button @click="click_file">选择图片</button>
            <button @click="scaleFunc(1)">放大</button>
            <button @click="scaleFunc(0)">缩小</button>
            <button @click="saveFunc">保存图片</button>
          </div>
        </div>

        <img :src="require(`@/assets/${bgNum}`)" v-if="!isnewbg"/>
        <img :src="newbg" v-else="isnewbg"/>
      </div>
      <button class="ok" @click="this.$store.state.imgChoose2 = false;updatebgs()">
        确定
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["bgindex"],
  data() {
    return {
      cw: 700,
      ch: 460,
      mw: 660,
      mh: 430,
      ml: 20,
      mt: 15,
      iw: 0,
      ih: 0,
      il: 0,
      it: 0,
      isMask: false,
      bgNum:
        `img/项目中心_21312_1660315213258.png`,
      isnewbg:false,
      newbg:''
    };
  },
  methods: {
    click_file() {
      this.$refs.file.click();
    },
    change_file() {
      this.isMask = true;
      let file = this.$refs.file.files[0];
      if (!file) return;
      let fileExa = new FileReader();
      fileExa.readAsDataURL(file);
      fileExa.onload = (ev) => {
        this.IMAGE = new Image();
        this.IMAGE.src = ev.target.result;
        // console.log(this.IMAGE.src);
        // console.log(this.IMAGE);
        this.IMAGE.onload = () => {
          this.iw = this.IMAGE.width;
          this.ih = this.IMAGE.height;
          let n; //图片缩放比例
          if (this.iw > this.ih) {
            n = this.iw / this.cw;
            this.ih = this.ih / n;
            this.iw = this.cw;
          } else if (this.ih > this.iw) {
            n = this.ih / this.ch;
            this.iw = this.iw / n;
            this.ih = this.ch;
          }
          // console.log(this.IMAGE.width,this.IMAGE.height);
          this.il = (this.cw - this.iw) / 2;
          this.it = (this.ch - this.ih) / 2;
          // console.log(this.il,this.it);

          this.drawImage();
        };
      };
    },
    drawImage() {
      //开始画画
      this.CTX = this.$refs.canvas.getContext("2d");
      // console.log(this.CTX);
      this.CTX.clearRect(0, 0, this.cw, this.ch);
      this.CTX.drawImage(this.IMAGE, this.il, this.it, this.iw, this.ih);
    },
    scaleFunc(val) {
      if (!this.IMAGE) return;
      let n = this.iw / this.ih,
        n1 = 20,
        n2 = 20 / n;
      if (val) {
        this.iw += n1;
        this.ih += n2;
      } else {
        this.iw -= n1;
        this.ih -= n2;
      }
      this.drawImage();
    },
    touchstartFunc(e) {
      this.bool = true;
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    touchmoveFunc(e) {
      if (!this.bool) return;
      this.moveX = e.clientX - this.startX;
      this.moveY = e.clientY - this.startY;
      this.il += this.moveX;
      this.it += this.moveY;
      this.drawImage();
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    endFunc(e) {
      this.bool = false;
    },
    saveFunc() {
      if (!this.IMAGE) return;
      let imageData = this.CTX.getImageData(this.ml, this.mt, this.mw, this.mh);
      let canvas2 = document.createElement("canvas"), //新的画布
        canvas2CTX = canvas2.getContext("2d");
      canvas2.width = this.mw;
      canvas2.height = this.mh;
      canvas2CTX.putImageData(imageData, 0, 0, 0, 0, this.mw, this.mh);
      // console.log(canvas2.toDataURL("image/png"));
      this.iamgeUrl = canvas2.toDataURL("image/png");
      this.imageName = Date.now();
      console.log(this.imageName);
      // this.$store.dispatch("get_test", {
      //   url: this.iamgeUrl,
      //   name: this.imageName,
      // });
      // this.$store.state.img2 = this.iamgeUrl;
      this.newbg = this.iamgeUrl;
      this.isnewbg = true
    },
    updatebgs(){
      this.$emit("updatebg",[this.iamgeUrl,this.bgindex])
    },
    childMethod(msg) {
      this.isnewbg = false
      this.bgNum=msg;
    }
  },
};
</script>

<style lang="less" scoped>
.post_image {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(168, 168, 168, 0.4);
  }
  .nomask {
    width: 1480px;
    height: 650px;
    background-color: aliceblue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  h1 {
    margin: 0 auto;
  }
  svg {
    width: 50px;
    height: 50px;
  }
  .bothom {
    display: flex;

    .left {
      border: 1px solid black;
      margin: 20px;
      .canvas {
        position: relative;
        z-index: 999;
        .mask {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.211);
          border: 1px dashed rgba(0, 0, 0, 0.575);
        }
      }
      .btns {
        display: flex;
        justify-content: center;
        button {
          margin: 0 5px;
          font-size: 20px;
        }
      }
    }

    img {
      margin: 20px;
      width: 660px;
      height: 430px;
    }
  }
  input {
    display: none;
  }
  .ok {
    margin-left: 700px;
    width: 100px;
    height: 60px;
    font-size: 30px;
  }
}
</style>